<template>
  <article class="innerPageHaveFooter addReaderType">
    <header class="breadcrumb">
      <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
      </x-breadcrumb>
    </header>
    <section>
      <el-form ref="elForm" :inline="true" :model="formData" :rules="rules">
        <p>
          权限配置
          <span>必填项</span>
        </p>
        <el-form-item label="权限名称" prop="permission_name">
          <el-input clearable v-model="formData.permission_name" placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="type">
          <div class="radioInputWrap">
            <x-radio v-for="(item, i) in authorityType" :key="i" v-model="formData.type" :label="item.value">
              {{ item.label }}
            </x-radio>
          </div>
        </el-form-item>
      </el-form>
      <!-- 菜单权限 -->
      <el-form ref="elFormMenu" :inline="true" :model="formData" :rules="rules" v-if="formData.type - 0 === 1 || formData.type - 0 === 2">
        <el-form-item label="是否主菜单" prop="isMainMenu" v-if="formData.type - 0 === 1">
          <div class="radioInputWrap">
            <x-radio v-model="formData.isMainMenu" label="1">是</x-radio>
            <x-radio v-model="formData.isMainMenu" label="2">否</x-radio>
          </div>
        </el-form-item>
        <el-form-item v-if="formData.isMainMenu - 0 === 2 || formData.type - 0 === 2" label="父级菜单" prop="pid">
          <el-cascader clearable v-model="formData.pid" placeholder="请选择父级菜单" :options="authorityTree" filterable :props="{
              value: 'id',
              label: 'permission_name',
              expandTrigger: 'hover',
              checkStrictly: true
            }"></el-cascader>
        </el-form-item>
        <el-form-item label="页面标题" prop="meta_title">
          <el-input clearable v-model="formData.meta_title" placeholder="请输入页面标题"></el-input>
        </el-form-item>
        <el-form-item label="页面图标" :prop="
            formData.type - 0 === 1 && formData.pid.length <= 1 ? 'icon' : ''
          ">
          <el-input clearable v-model="formData.icon" placeholder="请输入页面图标名称"></el-input>
        </el-form-item>
        <el-form-item label="跳转按钮名称">
          <el-input clearable v-model="formData.view_name" placeholder="请输入按钮名称"></el-input>
        </el-form-item>
        <el-form-item label="路由路径" :prop="formData.type - 0 === 2 ? 'route_path' : ''">
          <el-input clearable v-model="formData.route_path" placeholder="请输入路由路径"></el-input>
        </el-form-item>
        <el-form-item label="路由别名" :prop="formData.type - 0 === 2 ? 'route_name' : ''">
          <el-input clearable v-model="formData.route_name" placeholder="请输入路由别名"></el-input>
        </el-form-item>
        <el-form-item label="接口请求地址" :prop="formData.type - 0 === 2 ? 'api_path' : ''">
          <el-input clearable type="textarea" :autosize="{ minRows: 4 }" v-model="formData.api_path" placeholder="请输入接口请求地址，多个地址请换行输入"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮权限 -->
      <el-form ref="elFormBtn" :inline="true" :model="formData" :rules="rules" v-if="formData.type - 0 === 3">
        <el-form-item label="父级页面" prop="pid">
          <el-cascader clearable v-model="formData.pid" placeholder="请选择父级菜单" :options="authorityTree" filterable :props="{
              value: 'id',
              label: 'permission_name',
              /* expandTrigger: 'hover', */
              checkStrictly: true
            }"></el-cascader>
        </el-form-item>
        <el-form-item label="按钮名称">
          <el-input clearable v-model="formData.view_name" placeholder="请输入按钮名称"></el-input>
        </el-form-item>
        <el-form-item label="接口请求地址">
          <el-input clearable type="textarea" :autosize="{ minRows: 4 }" v-model="formData.api_path" placeholder="请输入接口请求地址，多个地址请换行输入"></el-input>
        </el-form-item>
      </el-form>
      <p>*提示：<span>部分权限设置需要重新登录后才能生效</span></p>
    </section>
    <footer>
      <el-button type="primary" @click="submitData">提交</el-button>
      <el-button type="info" @click="pageTurn('/systemSetting/authorityList')">
        取消
      </el-button>
    </footer>
  </article>
</template>

<script>
export default {
  data() {
    return {
      authorityTree: [],
      rules: {
        permission_name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择权限类型', trigger: 'blur' }],
        isMainMenu: [
          { required: true, message: '请选择是否主菜单', trigger: 'blur' }
        ],
        pid: [{ required: true, message: '请选择父级菜单', trigger: 'blur' }],
        meta_title: [
          { required: true, message: '请输入页面标题', trigger: 'blur' }
        ],
        icon: [{ required: true, message: '请输入页面图标', trigger: 'blur' }],
        route_path: [
          { required: true, message: '请输入路由路径', trigger: 'blur' }
        ],
        route_name: [
          { required: true, message: '请输入路由别名', trigger: 'blur' }
        ],
        api_path: [
          { required: true, message: '请输入接口请求地址', trigger: 'blur' }
        ],
        /*  */
        cash: [
          {
            required: true,
            validator: this.$elValidator?.positiveNum,
            trigger: 'blur'
          }
        ]
      },
      authorityType: [
        {
          value: '1',
          label: '菜单'
        },
        {
          value: '2',
          label: '页面'
        },
        {
          value: '3',
          label: '按钮'
        }
      ],
    }
  },
  props: {
    formData: {
      type: Object,
      default: {
        permission_name: '',
        type: '3',
        sidebar_name: '',
        icon: '',
        route_name: '',
        meta_title: '',
        route_path: '',
        component_path: '',
        pid: [],
        api_path: '',
        order: '',
        view_name: '', // 此字段原权限管理系统为命名视图，现作为按钮名称使用
        redirect: '',
        hl_routes: '',
        /*  */
        isMainMenu: ''
      }
    }
  },
  methods: {
    async getAuthorityTree() {
      try {
        let res = await this.request({
          url: '/admin/permission/tree',
          method: 'get',
          data: {
            type: 3
          }
        })
        let jsonData = JSON.stringify(res.content)
        jsonData = JSON.parse(
          jsonData.replace(/"children":\[]/g, '"children":null')
        )
        this.authorityTree = jsonData
        // this.$route.query.id && this.getDetail()
      } catch (err) {
        this.authorityTree = []
        this.errorHandler(err)
      }
    },
    async submitData(){
      await this.$refs.elForm.validate()
      await this.$refs?.elFormMenu?.validate()
      await this.$refs?.elFormBtn?.validate()
      let url = ''
      let data = JSON.parse(JSON.stringify(this.formData))
      data.api_path = data.api_path.split('\n').toString()
      if (data.isMainMenu - 0 === 1) {
        data.pid = 0
      }
      if (this.$valueType(data.pid) === 'array') {
        data.pid = data.pid?.pop()
      }
      this.$emit('confirm',data)
    }
  },
  created(){
    this.getAuthorityTree()
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>